<template>
  <div>
    <!-- 添加账单的逻辑 -->
    <el-dialog
      title="添加账单"
      :visible="visible"
      width="width"
      @close="$emit('update:visible',false)"
    >
      <!-- 生成表单 -->
      <myForm ref="form" :option="option" :form="form" @timeChange="onTime" />
      <div slot="footer">
        <el-button @click="$emit('update:visible',false)">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import MyForm from '@/components/my-form/TForm.vue'
import { option } from './const.js'
import { getPayMentAPI } from '@/api/workbench.js'
import { addBillAPI } from '@/api/propertyfee'

export default {
  components: {
    MyForm
  },
  props: {
    visible: Boolean
  },
  data() {
    return {
      option,
      form: {}
    }
  },
  watch: {
    visible(val) {
      if (val === false) {
        this.$refs.form.resetFields()
        this.form = {}
      }
    }
  },
  methods: {
    async onTime(time) {
      console.log(time)
      const data = {
        buildingId: this.form.buildingId,
        startTime: time[0],
        endTime: time[1]
      }
      const res = await getPayMentAPI(data)
      this.$set(this.form, 'paymentAmount', res)
    },
    async onSubmit() {
      await this.$refs.form.validate()
      this.form.startTime = this.form.time[0]
      this.form.endTime = this.form.time[1]
      delete this.form.time
      // 发请求
      await addBillAPI(this.form)
      this.$message.success('添加账单成功!')
      this.$emit('update:visible', false)
    }
  }

}
</script>

<style>

</style>
